<template>
  <div>
    <el-dialog title="新增内容"
               @close="close"
               :visible.sync="dialogFormVisible">
      <el-form :model="form"
               ref="optionsForm"
               :rules="addRules">
        <el-form-item label="内容名称"
                      :label-width="formLabelWidth"
                      prop="label">
          <el-input v-model="form.label"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="格式"
                      :label-width="formLabelWidth"
                      prop="type">
          <el-select v-model="form.type"
                     @change="getType"
                     placeholder="请选择格式">
            <el-option v-for="(item, index) in allTypes"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="长度限制"
                      v-if="form.type==0||form.type==2"
                      :min="0"
                      :max="1000"
                      :label-width="formLabelWidth"
                      prop="max">
          <el-input v-model="form.max"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数值单位"
                      v-if="form.type==1"
                      :label-width="formLabelWidth"
                      prop="unit">
          <el-input v-model="form.unit"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否必填"
                      :label-width="formLabelWidth"
                      prop="isWrite">
          <el-select v-model="form.isWrite"
                     placeholder="请选择">
            <el-option label="非必填"
                       value="0"></el-option>
            <el-option label="必填"
                       value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"
                   @click="addOne">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator'
import { Form } from 'element-ui'
interface formType {
  label: string
  type: string
  max: number | null
  isWrite: string
  order: number | null,
  unit?: string
}
@Component({
  name: 'AddOptions'
})
export default class extends Vue {
  @Prop({ type: Boolean, required: true }) isAdd!: boolean
  @Prop({ type: Array, required: true }) allTypes!: any[]
  @Prop({ type: Number, required: true }) len!: number
  dialogFormVisible = false
  form: formType = {
    label: '',
    type: '',
    max: null,
    isWrite: '',
    order: null,
    unit: ''
  }

  formLabelWidth = '80px'
  addRules: object = {
    label: [
      { required: true, message: '请补充完整', trigger: ['change', 'blur'] }
    ],
    type: [
      { required: true, message: '请补充完整', trigger: ['change', 'blur'] }
    ],
    isWrite: [
      { required: true, message: '请补充完整', trigger: ['change', 'blur'] }
    ]
  }

  @Watch('isAdd', { immediate: true })
  private onIsAddChanged (val: boolean, oldVal: boolean) {
    this.dialogFormVisible = val
    if (val) {
      this.$nextTick(() => {
        (this.$refs.optionsForm as Form).resetFields()
      })
    }
  }

  @Emit('update:isAdd')
  close () {
    return false
  }

  getType () {
    this.form.max = null
  }

  addOne () {
    (this.$refs.optionsForm as Form).validate((valid) => {
      if (valid) {
        // 添加要素不生成对应的id,后端可能自动生成对应的id，用于删除功能
        this.form.order = this.len + 1
        this.handleReturnOption(this.form)
        this.close()
      }
    })
  }

  @Emit('handleReturnOption')
  handleReturnOption (options: object) {
    const option = JSON.parse(JSON.stringify(options))
    return option
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100% !important;
}
</style>
